<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center mance_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub mance_fd0_0'>
					<view class='flex flex-wrap align-center mance_fd0_0_c0'>
						<text class='fu-iconfont2  mance_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='mance_fd0_0_c1_c0'>试题详情</text>
					</view>
					<view class='flex flex-wrap align-center justify-end mance_fd0_0_c0'>
					</view>
				</view>
			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

			<view class="overview">
				<view class="overview-ite">
					<view class="ite-tit">
						{{obj.title}}
					</view>
					<view class="ite-content">
						<view class="course">
							<image class="course-img" src="/static/exam/1.png" mode=""></image>
							总分：<span>{{obj.total_score}}分 </span>
						</view>
						<view class="course">
							<image class="course-img" src="/static/exam/3.png" mode=""></image>
							题数：<span>{{obj.q_num}}题</span>
						</view>
						<view class="course">
							<image class="course-img" src="/static/exam/2.png" mode=""></image>
							时长：<span>{{obj.limited_time}}分钟</span>
						</view>
						<view class="course">
							<image class="course-img" src="/static/exam/2.png" mode=""></image>
							通过分数：<span>{{obj.pass_score}}分</span>
						</view>
						<!-- <view class="course">
							<image class="course-img" src="/static/exam/4.png" mode=""></image>
							学期：<span>{{obj.xueqi}}</span>
						</view> -->
					</view>
				</view>

				<!-- 介绍 -->
				<view class="introduce">
					<view class="title">
						题型介绍
					</view>
					<view class="introduce-ite" v-for="(item,index) in info" :key='index'>
						<view class="type">
							{{item.type}}
						</view>
						<view class="content">
							{{item.brief}}
						</view>
					</view>
					<!-- <view class="introduce-ite" >
						<view class="type">
							单项选择题
						</view>
						<view class="content">
							下列每小题的四个选项中，只有一项是最符合题意的正确答案，多选、错选或不选均不得分。
						</view>
					</view>
					<view class="introduce-ite">
						<view class="type">
							多项选择题
						</view>
						<view class="content">
							下列每小题的备选答案中，有两个或两个以上符合题意的正确答案，少选、多选、错选均不得分。 </view>
					</view>
					<view class="introduce-ite">
						<view class="type">
							简答题
						</view>
						<view class="content">
							下列每小题的答案为文字，得分根据所填文字匹配率以及其他规则进行评分。 </view>
					</view>
 -->
				</view>
			</view>
			<!---flex布局flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center coursePro_flex_3"
				:style=" {height:(150+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }">

				<view class='coursePro_fd3_0' @tap.stop="ks">
					<image style="width: 34rpx;height: 34rpx;margin-right: 12rpx;" src="/static/img02/start.png"
						mode="">
					</image>开始考试
				</view>
			</view>
			<view :style="{height: (110+bottomSafeAreaRpx)+'rpx'}"></view>
		</view>
	</page-body>
</template>


<script>
	// 
	export default {
		data() {
			return {
				info:[],
				obj: {},
				exampaper_id: '',
				papercourse_id:'',//考试id
				name:'',//考试名称
			};
		},
		onLoad(options) {
			console.log('vvvvvvvvvvvv', options);
			this.exampaper_id = options.exampaper_id
			this.papercourse_id=options.papercourse_id
			this.name=options.name
			this.get_exampaper_detail(options.exampaper_id)
			this.getinfo()
		},
		mounted() {},
		methods: {
			async get_exampaper_detail(val) {
				let res = await this.$api.get(global.apiUrls.post686e2c8838121, {
					papercourse_id: this.papercourse_id
				});

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}

				this.obj = res.data.data
			},
			
			// 获取题型介绍
			async getinfo() {
				let res = await this.$api.get(global.apiUrls.post68d5edcd84a5f, {
					// aid: val
				});
			
				
				this.info = res.data.data
			},
			
			// 开始考试
			async ks(){
				let res = await this.$api.post(global.apiUrls.post690ac35c3f569, {
					papercourse_id: this.papercourse_id
				});
				if(res.data.code !=1){
					this.$message.info(res.data.msg)
					return
				}
				uni.redirectTo({
					url:'/pages/exam/startExam/startExam?exampaper_id='+this.exampaper_id+'&testName='+this.obj.title+'&time='+this.obj.limited_time+'&papercourse_id='+this.papercourse_id+'&xs_hand='+this.obj.xs_hand
				})
				// :data-url="`/pages/exam/startExam/startExam?exampaper_id=${exampaper_id}&testName=${obj.title}&time=${obj.limited_time}&papercourse_id=${papercourse_id}`"
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
		background-color: #F3F4F8;

	}

	.overview {
		min-height: 500rpx;
		width: 100%;
		flex: 1;
		overflow-y: auto;
		margin-top: 24rpx;
		overflow-y: auto;

		.introduce {
			// height: 854rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 24rpx 24rpx;
			padding: 0 24rpx;
			display: block;
			padding-top: 1rpx;
			padding-bottom: 40rpx;

			.title {
				height: 45rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				line-height: 45rpx;
				margin-top: 36rpx;
			}

			.introduce-ite {
				padding-bottom: 36rpx;
				border-bottom: 2rpx solid rgba(238, 238, 238, 1);

				.type {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-top: 36rpx;
				}

				.content {
					font-weight: 400;
					font-size: 28rpx;
					color: #707070;
					line-height: 48rpx;
					margin-top: 24rpx;
				}
			}
		}

		.overview-ite {
			min-height: 332rpx;
			margin: 0 24rpx 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;


			.ite-tit {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
				margin: 32rpx 0 0 24rpx;
			}

			.ite-content {
				margin: 24rpx;
				min-height: 194rpx;
				background: #F9FAFC;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 42rpx 24rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.course {
					font-weight: 400;
					font-size: 26rpx;
					color: #707070;
					min-height: 32rpx;
					display: flex;
					align-items: center;
					width: 50%;


					.course-img {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
						flex-shrink: 0;
					}

					span {
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						display: inline-block;
						flex: 1;

					}
				}
			}
		}

	}

	.coursePro_flex_3 {
		width: 750rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-color: #fff;

		.coursePro_fd3_0 {
			width: 450rpx;
			height: 98rpx;
			background: #EDF5FF;
			font-weight: 500;
			font-size: 36rpx;
			color: #145EFD;
			border-radius: 44rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}



	.mance_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.mance_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.mance_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.mance_fd0_0_c0 {
		width: 120rpx;
	}

	.mance_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>